<template>
  <el-dialog title="保存" v-model="show" center width="700px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false" destroy-on-close>
    <div class="v_dialog_body" v-loading="loading">
      <el-form :model="form" ref="form" class="header">
        <div class="header_row">
          <el-form-item style="width:320px;" label="产品大类" prop="prdBigType">
            <el-select  size="small" v-model="form.prdBigType" placeholder="请选择产品大类" clearable style="width: 100%" @change="getPrdSmallTypeList(form.prdBigType)">
              <el-option v-for="item in prdBigTypeList" :key="item.key" :label="item.name" :value="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:320px; margin-left: 20px;" label="产品小类" prop="prdSmallType">
            <el-select  size="small" v-model="form.prdSmallType" placeholder="请选择产品小类" clearable style="width: 100%" >
              <el-option v-for="item in prdSmallTypeInnerList" :key="item.key" :label="item.name" :value="item.key"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="header_row">
          <el-form-item  style="width:320px;" label="生产许可证" prop="prdLicence" :rules="[{ required: true, message: '请输入生产许可证'}]">
            <el-input size="small" v-model="form.prdLicence" placeholder="请输入生产许可证"></el-input>
          </el-form-item>
          <el-form-item style="width:320px; margin-left: 20px;" label="生产过程名称" prop="prdProcessName" :rules="[{ required: true, message: '请选择生产过程名称'}]" >
            <el-select size="small" v-model="form.prdProcessName" placeholder="请选择生产过程名称" clearable style="width: 100%">
              <el-option v-for="item in dataList" :key="item.prdProcessName" :label="item.prdProcessName" :value="item.prdProcessName"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="header_row">
          <el-form-item style="width:360px; " label="检验结果" prop="checkResult" :rules="[{ required: true, message: '请选择检验结果'}]" >
            <el-select  size="small" v-model="form.checkResult" placeholder="请选择检验结果" clearable style="width: 100%">
              <el-option v-for="item in checkResultList" :key="item.name" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:360px; margin-left: 20px" prop="dueDate" label="到期日">
            <el-date-picker size="small" v-model="form.dueDate" value-format="YYYY-MM-DD HH:mm:ss" clearable type="datetime"/>
          </el-form-item>
        </div>
        <div class="header_row">
          <el-form-item  style="width:315px;" label="产品标准号" prop="prdStandardNo" :rules="[{ required: true, message: '请输入产品标准号'}]">
            <el-input size="small" v-model="form.prdStandardNo" placeholder="请输入产品标准号"></el-input>
          </el-form-item>
        </div>
        <div class="header_row">
<!--          <div v-for="(img, idx) in form.picList" style="width: 300px; height: 300px; margin-right: 10px;">-->
<!--            <el-image :src="img"></el-image>-->
<!--            <el-button type="text" @click="removePic(idx, img)">删除</el-button>-->
<!--          </div>-->
          <el-form-item label="上传图片或视频" prop="image">
            <el-upload
                list-type="picture-card"
                drag
                :auto-upload="false"
                :on-change="getImage"
                :on-remove="onRemove"
                action=""
                :file-list="fileList"
                multiple>

              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>

        <div v-if="videoSrc !== 'undefined' && videoSrc != null && videoSrc !==''">
          <video
              ref="videoPlayer"
              style="height: 400px; width: 100%;"
              controls
              @loadedmetadata="videoLoaded">
            <source :src="videoSrc" :type="videoType">
            Your browser does not support the video tag.
          </video>
        </div>

      </el-form>


    </div>
    <div class="footer">
      <el-button  type="primary" icon="el-icon-check" size="small" v-on:click="doSave">确定</el-button>
      <el-button v-on:click="show = false" icon="el-icon-back" size="small">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

import dayjs from "dayjs";

export default {

  data() {
    return {
      loading: false,
      show: false,
      form: {},
      dataList: [],
      prdSmallTypeList: [],
      prdSmallTypeInnerList: [],
      prdBigTypeList: [],
      checkResultList: [
        { name: "检验合格"},
        { name: "检验不合格"}
      ],
      fileList: [],
      mediaList:[],
      id : '',
      videoType : 'video/mp4',
      videoSrc : ''
    }
  },
  async mounted() {
    await this.getDictionaries()
    await this.getPrdProcess()
  },
  methods: {
    async removePic(idx, img) {
      const arr = img.split('/')
      let pic = arr[arr.length -2] + '/' + arr[arr.length -1]
      this.loading = true;
      try {
        let res = await this.callApi('delete_certificate_img', {
          pic: pic,
          id: this.form.id
        })
        if (!res.res) {
          return
        }
        this.form.picList.splice(idx, 1)
      } finally {
        this.loading = false;
      }
    },
    getPrdSmallTypeList(bigType) {
      this.form.prdSmallType = ''
      let prdSmallTypeInnerList = []
      for (let i = 0; i < this.prdSmallTypeList.length; i++) {
        let a = this.prdSmallTypeList[i].key.substring(0, 4);
        if (a === bigType) {
          prdSmallTypeInnerList.push(this.prdSmallTypeList[i])
        }
      }
      this.prdSmallTypeInnerList = prdSmallTypeInnerList
    },
    async getDictionaries() {
      this.loading = true;
      try {
        let res = await this.$api.getChildDictionaryListByKeys({
          keys: ['prdBigType', 'prdSmallType']
        });
        if (!res.res) return;
        this.prdBigTypeList = res.prdBigType;
        this.prdSmallTypeList = res.prdSmallType;
      } finally {
        this.loading = false;
      }
    },
    limitProduceDate(d) {
      return dayjs(d).isAfter(dayjs())
    },
    /**
     * 图片改变时
     * */
    getImage(file, fileList) {
      this.handleFileList(fileList)
    },
    /**
     * 视频改变时
     * */
    getVideo(file, fileList) {
      this.handleVideoList(fileList)
    },
    /**
     *
     * @param fileList
     */
    handleVideoList(fileList) {
      this.fileList = fileList.map(v => {
        return v
      })
    },
    /**
     *
     * @param fileList
     */
    handleFileList(fileList) {
      this.fileList = fileList.map(v => {
        return v
      })
    },
    /**
     * 图片删除时
     * @param e
     */
    onRemove(file, fileList) {
      this.handleFileList(fileList)
    },
    async getPrdProcess() {
      this.loading = true;
      try {
        let res = await this.callApi('get_prd_process_list_key', {
          key: this.form.prdProcessName
        })
        if (!res.res) {
          return
        }
        this.dataList = res.data;
      } finally {
        this.loading = false;
      }
    },
    open (row) {
      if (row != null) {
        let pics = []
        if (row.pics && row.pics.length > 0) {
          for(let i = 0; i < row.pics.length; i++) {
            pics.push({ path: row.pics[i], url: row.picList[i] })
          }
        }
        this.form = Object.assign({}, row)
        this.id = this.form.id
        this.fileList = pics
        this.videoSrc = row.videoList[0]
      } else {
        this.form = { prdProcessName: "" }
        this.fileList = []
      }
      this.show = true
    },
    doSave() {
      return this.$refs.form.validate(async valid => {
        if (!valid) return;
        try {
          let file = []
          let pics = []
          if (this.fileList && this.fileList.length > 0) {
            this.fileList.forEach(v => {
              if (v.raw) {
                file.push(v.raw)
              } else {
                pics.push(v.path)
              }
            })
          }
          let res = await this.callApi('add_certificate', {
            id: this.form.id,
            prdBigType: this.form.prdBigType,
            prdSmallType: this.form.prdSmallType,
            prdLicence: this.form.prdLicence,
            prdProcessName: this.form.prdProcessName,
            checkResult: this.form.checkResult,
            dueDate: this.form.dueDate,
            prdStandardNo: this.form.prdStandardNo,
            files: file,
            picList: JSON.stringify(pics),
          })
          if (!res.res) {
            return
          }
          this.$message.success(`保存成功!`)
          this.show = false
          this.$emit("save")
        } finally {
          this.loading = false;
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  margin-top: 20px;
  position: relative;

  .header_row {
    display: flex;
  }
  :deep(.el-upload-dragger) {
    height: 146px !important;
    width: 146px !important;
  }
}
</style>
